﻿@page "/components/appbar"
@page "/components/MudAppBar"

<DocsPage>
    <DocsPageHeader Title="App Bar" SubTitle="An app bar is used to display actions, branding, navigation and screen titles.">
        <Description>
            Keeping the app bar persistent while browsing different pages will ease navigation and access to actions for your users.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic App Bar">
                <Description>
                    <MudText Class="py-6">App bars have two types: regular and contextual action bar. Below is an example of a regular app bar.</MudText>
                    <MudText>A contextual action bar is something that will provide actions for a selected item on the page.</MudText>
                    <MudText>A top bar can transform into a contextual action bar and be dismissed at any time.</MudText>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(AppBarSimpleExample)">
                <AppBarSimpleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Usage">
                <Description>
                    <MudText>You can customize the Elevation of an AppBar, as well as set the Dense property to save space.</MudText>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(AppBarUsageExample)" ShowCode="false">
                <AppBarUsageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Bottom App Bar">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(AppBarBottomExample)" ShowCode="false">
                <iframe src="/iframe/docs/examples/appbar/bottom" class="docs-iframe rounded mud-elevation-25" style="height: 450px; ">
                    <AppBarBottomExample />
                </iframe>
            </SectionContent>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
